<template>
  <div  class="image-container">
    <ImageShow v-for="[label,url] of urls" :key="label" :title="label" :url="url" class="image-show-item"/>
  </div>
</template>

<script setup>

import ImageShow from "@/components/ImageShow/ImageShow.vue";


defineProps({
  urls: {
    type: Map,
    required:true
  }
})
</script>

<style scoped>

.image-container{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}


.image-show-item{
  padding-top: 10vh;
  width: 25vw;
  height: 70vh;
}

.title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-top: 10px;
}

</style>